<template>
  <div class="main">
    <div class="details">
      <el-card style="background: #e9eef3" shadow="never">
        <template #header>
          <div class="card-header" style="text-align: left;line-height: 32px">
            <el-row>
              <el-col :span="6">
                <span>订单详情：</span>
                <span v-text="baseInfo.remarks" id="type"></span>
              </el-col>
              <el-col :span="6">
                <span>订单编号：</span>
                <span>{{ baseInfo.orderNo }}</span>
              </el-col>
              <el-col :span="6">
                <span>报修时间：</span>
                <span>{{ parseTime(baseInfo.orderDate) }}</span>
              </el-col>
              <el-col :span="6">
                <span>派单时间：</span>
                <span>{{ parseTime(baseInfo.updateTime) }}</span>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="text-align: left;padding: 0 20px;">
          <el-form :model="baseInfo">
            <el-row>
              <el-col :span="12">
                <el-form-item label="报修设备">
                  <span>{{ baseInfo.equipment }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修单位">
                  <span>{{ baseInfo.repairUnit }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备品牌">
                  <span>{{ baseInfo.brand }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修人">
                  <span>{{ baseInfo.customerName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备型号">
                  <span>{{ baseInfo.model }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话">
                  <span>{{ baseInfo.phone }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出厂编号">
                  <span>{{ baseInfo.factoryNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修地址">
                  <span>{{ baseInfo.address }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="报修问题">
                  <span>{{ baseInfo.description }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目编号">
                  <span>{{ baseInfo.itemNo }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <!--<el-row>
              <el-col :span="12">
                <el-form-item label="转出人">
                  <span>{{ baseInfo.description }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="转单时间">
                  <span>{{ baseInfo.itemNo }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="转单留言">
                  <span>{{ baseInfo.description }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备类型">
                  <span>{{ baseInfo.itemNo }}</span>
                </el-form-item>
              </el-col>
            </el-row>-->
            <el-row>
              <el-col :span="12">
                <el-form-item label="报修图片">
                  <el-image
                      v-for="(item,index) in srcList"
                      :key="index"
                      style="height: 300px;width: 80%"
                      :src="item"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="srcList"
                      lazy
                      :scroll-container="scrollContainer"
                      show-progress
                      :initial-index="4"
                      fit="cover"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修视频">
                  <video
                      ref="videoPlayer"
                      controls
                      height="300"
                      width="80%"
                      :src="baseInfo.videoUrl"
                  >
                    您的浏览器不支持 HTML5 视频标签。
                  </video>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="project">
      <!-- 项目归属 -->
      <el-card style="background: #e9eef3" shadow="never">
        <template #header>
          <div class="card-header" style="text-align: left;line-height: 32px">
            <el-row>
              <el-col :span="12">
                <div style="display: flex">
                  <div style="line-height: 32px">项目归属：</div>
                  <div class="top_check">
                    <el-radio v-model="radio" label="1">是</el-radio>
                    <el-radio v-model="radio" label="2">否</el-radio>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div style="display: flex">
                  <el-button
                      type="text"
                      @click="checkProject('选择项目')"
                      plain
                      :disabled="radio == 2"
                  >选择项目
                  </el-button>
                  <div class="top_num_text">{{ radio === 1 ? projectNo : '' }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="text-align: left;padding: 0 20px;">
          <el-form :model="project">
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目甲方">
                  <span>{{ project.customerName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单店名称">
                  <span>{{ project.shop }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开始时间">
                  <span>{{ parseTime(project.maintenanceStartDate) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间">
                  <span>{{ parseTime(project.maintenanceEndDate) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同编号">
                  <span>{{ project.contractNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同名称">
                  <span>{{ project.contractName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称">
                  <span>{{ project.itemName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维保周期">
                  <span>{{ project.maintenanceCycle }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目类型">
                  <span>{{ project.itemType }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属销售">
                  <span>{{ project.contractSale }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否过保">
                  <span>{{ project.isPay?'是':'否' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>

    <div class="operation">
      <el-row>
        <el-col :span="19" :offset="5">
          <span>订单操作：</span>
          <el-select
              v-model="value"
              placeholder="请选择"
              @change="change_item"
          >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div class="check_worker" v-if="value === 1">
      <el-card style="background: #e9eef3" shadow="never">
        <template #header>
          <div class="card-header" style="text-align: left;line-height: 32px">
            <el-row>
              <el-col :span="24">
                <div style="display: flex">
                  <el-button type="text" @click="checkProject('选择维修师')" plain>维修工选择</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="text-align: left;padding: 0 20px;">
          <el-form :model="works">
            <el-row>
              <el-col :span="12">
                <el-form-item label="维修师">
                  <span>{{ works.workName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话">
                  <span>{{ works.phone }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="专业">
                  <span>{{ works.major }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="技能">
                  <span>{{ works.memo }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="上门检查费">
                  <el-input-number v-model="works.dropInFee" :precision="2" :step="1" :min="1" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="tel_handle" v-if="value === 2">
      <el-card style="background: #e9eef3" shadow="never">
        <div style="text-align: left;padding: 0 20px;">
          <el-form :model="phoneDo">
            <el-row>
              <el-col :span="12">
                <el-form-item label="处理时间">
                  <span>{{ phoneDo.handle_time }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="损坏原因">
                  <el-input
                      style="width:90%"
                      v-model="phoneDo.handle_input1"
                      placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工作分析">
                  <el-input
                      style="width:90%"
                      v-model="phoneDo.handle_input2"
                      placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="其他说明">
                  <el-input
                      style="width:90%"
                      v-model="phoneDo.handle_input3"
                      placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <div class="close_order" v-if="value === 3">
      <div class="close_content">
        <el-row>
          <el-col :span="24">
            <div style="display: flex">
              <div style="width: 20%;line-height: 32px">关闭原因</div>
              <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入关闭原因"
                  v-model="textarea_close"
              >
              </el-input>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog :title="title" v-model="open" width="80%" append-to-body>
      <Project v-if="title==='选择项目'" ref="projects"></Project>
      <Repairman v-if="title==='选择维修师'" ref="repairman"></Repairman>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Project from '../../project/index.vue'
import Repairman from '../../repairman/index.vue'
import {getOrderDetail} from "@/api/system/orders.js";
import video from '@/assets/images/a.mp4'

const srcList = ref([])
const srcList1 = ref([])
const baseInfo = ref({})
const project = ref({})
const phoneDo = ref({
  handle_time:'',
  handle_input1:'',
  handle_input2:'',
  handle_input3:'',
})
const works = ref({})
const orderParts = ref([])
// 项目归属是或者否
const radio = ref('1')
const value = ref('')
const deposit = ref('')
const textarea_close = ref('')
const open = ref(false)
const title = ref('')
// 分派确定按钮禁用
const fp_flog = ref(false)
//获取子组件方法
const repairman = ref(null)
const projects = ref(null)

const options = [
  {
    value: 1,
    label: "订单分派",
  },
  {
    value: 2,
    label: "电话处理",
  },
  {
    value: 3,
    label: "关闭订单",
  },
]

const scrollContainer = ref(null);

onMounted(()=>{
  // 设置滚动容器（通常是父级滚动元素或 window）
  scrollContainer.value = document.querySelector('.details') || window;
})

//订单分派--电话解决--获取当前时间
const change_item = () => {
  if (value.value == 2) {
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth() + 1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf =
        new Date().getMinutes() < 10
            ? "0" + new Date().getMinutes()
            : new Date().getMinutes();
    phoneDo.value.handle_time = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf;
  }
}
//判断是否过保
const isPayDate = (date) => {
  if (!date) return false; // 处理空值情况
  const now = new Date();
  const expiryDate = new Date(date);
  return now > expiryDate;
}
const checkProject = (v) => {
  open.value = true
  title.value = v
}
const submitForm = () =>{
  if(title.value==='选择维修师'){
    works.value = repairman.value.currentRow
    open.value = false
  }else if(title.value==='选择项目'){
    project.value = projects.value.currentRow
    project.value.isPay = isPayDate(project.value.maintenanceEndDate)
    open.value = false
  }
}
const getDetail = (v) => {

  baseInfo.value = {
    remarks:'aaa0',
    orderNo:'aaa1',
    orderDate:'2025-07-07 12:22:44',
    updateTime:'2025-07-07 12:22:45',
    equipment:'aaa4',
    repairUnit:'aaa5',
    brand:'aaa6',
    customerName:'aaa7',
    model:'aaa8',
    phone:'aaa9',
    factoryNo:'aaa10',
    address:'aaa11',
    description:'aaa12',
    itemNo:'aaa13',
    videoUrl:video,
  }
  project.value = {
    customerName:'bbb0',
    shop:'bbb1',
    maintenanceStartDate:'2025-01-01 10:08:11',
    maintenanceEndDate:'2025-01-01 10:08:12',
    contractNo:'bbb4',
    contractName:'bbb5',
    itemName:'bbb6',
    maintenanceCycle:'bbb7',
    itemType:'bbb8',
    contractSale:'bbb9',
    isPay:false,
  }
  works.value = {
    workName:'ccc0',
    phone:'ccc1',
    major:'ccc2',
    memo:'ccc3',
    dropInFee:100,
  }
  let str = 'https://tse2-mm.cn.bing.net/th/id/OIP-C.GMzp8x8fUw2CSf4HRvgIIQHaE7?w=305&h=203&c=7&r=0&o=5&dpr=1.1&pid=1.7,https://img95.699pic.com/photo/60040/4108.jpg_wh860.jpg'
  srcList.value = str.split(',')

  /*getOrderDetail({orderNo: v}).then(res => {
    if (res.code === 200) {
      let {item, orderParts, orders, work} = res.data
      baseInfo.value = orders
      project.value = item || {}
      if(item){
        project.value.isPay = isPayDate(item.maintenanceEndDate)
      }
      works.value = work || {}
      orderParts.value = orderParts
      srcList.value = orders.pictureUrl.split(',')
    }
  })*/
}
defineExpose({getDetail,phoneDo,value,radio,project,baseInfo,works})
</script>

<style scoped lang="scss">
:deep(.el-row) {
  padding: 10px 0;
}

:deep(.el-card__header) {
  border-bottom: 1px solid #333;
  padding: 0 14px !important;
}

.tel_handle {
  width: 100%;
}

.item_info {
  width: 85%;
  height: 100%;
}

.item_info .el-input {
  width: 100%;
  height: 100%;
}

.close_order {
  width: 100%;
}

#type {
  /* display: block; */
  background-color: rgb(255, 51, 0);
  color: white;
  padding: 1vh;
  margin-left: 1vw;
  border-radius: 50px;
}

.close_content {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.el-header {
  background-color: #ffffff;
  text-align: center;
  width: 100%;
  height: 72px;
}

.el-page-header {
  height: 100%;
  line-height: 72px;
  color: #a2a2a2;
  display: flex;
  align-items: center;
}

.el-main {
  background-color: rgb(242, 242, 242);
  color: #333;
  text-align: center;
  width: 100%;
  height: auto;
}

.main {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border: 1px solid black;
  background-color: #e9eef3;
}

.details {
  width: 100%;
  border-bottom: 1px solid black;
}

.project {
  width: 100%;
  border-bottom: 1px solid black;
}

.operation {
  width: 100%;
}

.woker_content {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.top_check {
  width: 45%;
  height: 100%;
  text-align: center;
}

.worker_title {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  line-height: 10vh;
  /* border-bottom: 1px solid black; */
}

.el-input {
  width: 20%;
  height: 100%;
}

.page {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  margin-top: 2vh;
}

.el-select {
  width: 60%;
  line-height: 10vh;
}
</style>
